<template>
	<uni-popup ref="modalPopup" type="center" :is-mask-click="false">
		<view class="modal-popup-content">
			<view class="close-ico" v-if="showCloseIcon" @click="$popupChange(this,'modalPopup')"><uni-icons type="closeempty" :size="20" color="#999"></uni-icons></view>
			<view class="title" v-if="title">{{ title }}</view>
			<slot>
				<view class="content">{{ content }}</view>
			</slot>
			<view class="btn-wrapper" v-if="btnDisplay == 'vertical'">
				<view class="modal-btn" hover-class="tap-hover" @click="btnClick({confirm: true, cancel: false})">{{ confirmText }}</view>
				<view class="text-btn" hover-class="tap-hover" v-if="showCancel" @click="btnClick({confirm: false, cancel: true})">{{ cancelText }}</view>
			</view>
			<view class="flex-btn" v-else>
				<view class="modal-btn cancel-btn" hover-class="tap-hover" v-if="showCancel" @click="btnClick({confirm: false, cancel: true})">{{ cancelText }}</view>
				<view class="modal-btn confirm-btn" hover-class="tap-hover" @click="btnClick({confirm: true, cancel: false})">{{ confirmText }}</view>
			</view>
		</view>	
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				content: '',
				confirmText: '确定',
				cancelText: '取消',
				btnDisplay: '',
				showCancel: true,
				callback: null,
				showCloseIcon: false,
			}
		},
		methods: {
			show(config = {}) {
				this.$refs.modalPopup.open()
				this.title = config.title || ''
				this.content = config.content || ''
				this.confirmText = config.confirmText || '确定'
				this.cancelText = config.cancelText || '取消'
				this.btnDisplay = config.btnDisplay || ''
				// this.showCancel = typeof(config?.showCancel) == 'boolean' ? config?.showCancel : true
				this.showCancel = config.showCancel ?? true
				// this.showCloseIcon = typeof(config?.showCloseIcon) == 'boolean' ? config?.showCloseIcon : false
				this.showCloseIcon = config.showCloseIcon ?? false
				this.callback = config.success || null
			},
			btnClick(data) {
				this.$refs.modalPopup.close()
				this.callback?.(data)
			},
		}
	}
</script>

<style scoped lang="scss">
	.modal-popup-content {
		width: 600rpx;
		border-radius: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		position: relative;
		animation: fadeZoom .2s linear;
		.close-ico {
			position: absolute;
			top: 20rpx;
			right: 24rpx;
		}
		.title {
			font-size: 30rpx;
			color: #666;
			text-align: center;
		}
		.content {
			font-size: 30rpx;
			font-weight: 500;
			padding-top: 20rpx;
			text-align: center;
			white-space: pre-line;
			word-wrap: break-word;
		}
		.btn-wrapper {
			margin-top: 60rpx;
			
			.text-btn {
				font-size: 28rpx;
				color: #999;
				margin-top: 24rpx;
				text-align: center;
			}
		}
		.modal-btn {
			width: 100%;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background-color: $uni-color-primary;
			color: #fff;
			border-radius: 36rpx;
		}
		.flex-btn {
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.cancel-btn {
				width: 240rpx;
				background-color: #f5f5f5;
				color: #666;
			}
			.confirm-btn {
				width: 240rpx;
				margin-left: 32rpx;
			}
		}
	}
	@keyframes fadeZoom {
		0% {
			transform: scale(.5);
			opacity: .5;
		}
	
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
</style>